script<template>
  <div>
    <!-- <hover-light-button
      :buttonname="buttonname"
      style="margin-top:20px"
      @click.native="routerTo('/charity/stucharity')"
    /> -->
    <!-- publishpage -->
    <div class="search bar2">
      <div class="form">
        <input
          type="text"
          placeholder="请输入学生编号..."
          v-model="input"
          @keyup.enter="search(input)"
        />
        <button @click="search(input)"></button>
      </div>
    </div>
    <div class="tips">
      <div class="card">
        <div class="block" v-for="(item, index) in imgList" :key="item">
          <el-image
            style="width: 160px; height: 100px; margin-top: 20px"
            :src="item.src"
            :fit="fit"
          ></el-image>
          <br />
          <span class="demonstration">{{ fits[index] }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HoverLightButton from "components/common/button/HoverLightButton.vue";
export default {
  name: "personSearch",
  props: {},
  data() {
    return {
      input: "",
      buttonname: "去发布>>",
      imgList: [
        {
          src: require("assets/image/charity/personDonation/message/message5.jpg"),
        },
        {
          src: require("assets/image/charity/personDonation/message/message2.jpg"),
        },
        {
          src: require("assets/image/charity/personDonation/message/message3.jpg"),
        },
        {
          src: require("assets/image/charity/personDonation/message/message4.jpg"),
        },
      ],
      fits: [
        "我叫林益阳，我来自云南曲靖，谢谢叔叔阿姨的帮助，我一定会好好学习，长大做一个对社会有用的人。",
        "我们来自四川凉山，我们的爸爸妈妈常年在外地打工，没人照顾我们，谢谢好心人的帮助，让我们能在学校有一个温暖的小窝。",
        "我叫小明，我今年考了第一名，爸爸妈妈可高兴了，谢谢大家的帮助。",
        "我叫子涵，这是我的妹妹子阳，谢谢叔叔阿姨的帮助，我们可以去上学啦。",
      ],
    };
  },

  components: {
    HoverLightButton,
  },

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    routerTo(path) {
      this.$router.push(path);
    },
    search(index) {
      if (index) this.bus.$emit("searchByRid", index);
    },
  },

  watch: {},
};
</script>
<style scoped lang="scss">
.form {
  position: relative;
  // width: 300px;
  margin: 3vh auto;
}
input,
button {
  border: none;
  outline: none;
}

input {
  width: 95%;
  height: 42px;
}

button {
  height: 42px;
  width: 42px;
  cursor: pointer;
  position: absolute;
}

/*搜索框2*/
.bar2 input,
.bar2 button {
  border-radius: 3px;
}
.bar2 input {
  background: #f9f0da;
}
.bar2 button {
  height: 26px;
  width: 26px;
  top: 8px;
  right: 8px;
  background: #f15b42;
}
.bar2 button:before {
  content: url(../../../../assets/image/common/right.svg);
  // font-family: FontAwesome;
  color: #f9f0da;
  font-size: 20px;
  font-weight: bold;
}
.tips {
  line-height: 1.75;
}
.card {
  width: 200px;
  height: 1100px;
  margin-left: 12%;
}
.block{
  margin-left: -8%;
   border: rgb(248, 238, 224) solid 1px;
  background-color: #f9f0da;
  // background-color:red;
}
</style>
